<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>给页面主题样式 Page Theming--JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="Jquery mobile RC1版本中文手册,Jquery Mobile RC1,Jquery mobile RC1,移动框架开发手册,darklord" />
<meta name="description" content="Jquery mobile RC1版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />
<div class="content">
				<h1>给页面主题样式 Page Theming</h1>
				<div class="desc">
				  <div>Jquery Mobile内建了一套样式主题系统，让你给页面添加样式时有丰富的选择。 针对每一个页面的组件，都有详细的主题样式文档，但是我们先看一下怎样应用主题样式</div></div>

  <div class="desc">
				  <div>给header和footer容器增加data-theme属性，并设定为a,b,c,d,e.可以应用任何一套主题样式。而当给页面内容添加data-theme属性时，我们推荐给整个content容器data-role="page"添加，而不是某个div或容器，这样背景也就可以应用到整个页面。</div></div>
				<p class="indent">默认的样式是混搭了多种主题样式的样子，使得各个组件层次分明 </p>
				<img src="../../images/Theming pages_1.png" tppabs="http://www.jqmapi.com/images/Theming%20pages_1.png">
                
   <div class="desc">
				  <div>给下面是5套应用了主题样式的页面 </div></div>               
				<p class="indent">主题A</p>
                <img src="../../images/Theming pages_A.png" tppabs="http://www.jqmapi.com/images/Theming%20pages_A.png">
                <p class="indent">主题B</p>
 <img src="../../images/Theming pages_B.png" tppabs="http://www.jqmapi.com/images/Theming%20pages_B.png">  
 
                 <p class="indent">主题C</p>
 <img src="../../images/Theming pages_C.png" tppabs="http://www.jqmapi.com/images/Theming%20pages_C.png">  
                  <p class="indent">主题D</p>
 <img src="../../images/Theming pages_D.png" tppabs="http://www.jqmapi.com/images/Theming%20pages_D.png"> 
                  <p class="indent">主题E</p>
 <img src="../../images/Theming pages_E.png" tppabs="http://www.jqmapi.com/images/Theming%20pages_E.png">                
			</div>
 			</div>           
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



